<template>
    <div class="blog-list">
        <el-card class="box-card">
            <article>
                <div class="header">
                    <h3 class="blog-title">留言版</h3>
                    <div class="blog-meta">
                        <!--                    <span>#{{blog.blog.name}}</span>-->
                    </div>
                </div>
                <el-divider></el-divider>
                <span style="text-align: center"> 说点什么吧</span>

            </article>
        </el-card>
        <div class="comments" >
            <div class="response">
                <el-divider><i class="el-icon-chat-dot-square"></i> {{total}}条评论</el-divider>
            </div>
            <div class="comment-data" v-if="comments.comment.length">
                <ol class="comment-list">
                    <!--循环li-->
                    <li v-for="item in comments.comment" :key="item.coid" class="comment-body comment-parent comment-even">
                        <el-avatar class="comment-avatar" shape="square" :src="item.url"></el-avatar>
                        <div class="comment-content">
                            <div class="comment-text">
                                <span class="comment-reply" style="float:right"><i class="el-icon-chat-dot-round"></i></span>
                                <!--                        <el-card class="comment-content">-->
                                <p>{{item.text}}</p>
                                <!--                        </el-card>-->
                            </div>
                            <div class="comment-meta">
                                By <span>{{item.author}}</span>  at {{item.created}}
                            </div>
                        </div>
                    </li>
                </ol>
                <el-pagination class="blog-page"
                               background
                               layout="prev, pager, next"
                               :current-page="current"
                               :page-size="PageSize"
                               :total="total"
                               @current-change=getMessages
                               hide-on-single-page="true">
                </el-pagination>
            </div>

            <div class="commentBox">
                <el-form :model="commentForm"  id="comment-form" >
                    <div class="comment-info">
                        <el-form-item >
                            <el-avatar id="comment-avatar" shape="square" ></el-avatar>
                        </el-form-item>

                        <el-form-item class="comment-input">
                            <el-input  v-model="commentForm.author" prefix-icon="el-icon-user" placeholder="(必填)昵称"></el-input>
                        </el-form-item>
                        <el-form-item  class="comment-input">
                            <el-input   v-model="commentForm.mail" prefix-icon="el-icon-connection" placeholder="(必填)邮箱"></el-input>
                        </el-form-item>
                        <el-form-item class="comment-input" >
                            <el-input  v-model="commentForm.url" prefix-icon="el-icon-paperclip" placeholder="(选填)网站"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item >
                        <el-input  v-model="commentForm.text" :rows="10" type="textarea" placeholder="来说点什么吧"></el-input>
                    </el-form-item>
                    <center>
                        <el-button plain @click="submit"><i class="el-icon-s-promotion" ></i> 提交</el-button>
                    </center>


                </el-form>
            </div>
        </div>
    </div>
</template>

<script>

    import {getMessage} from "@/api/message" ;
    import { ElMessage } from 'element-plus'
    import {ref,reactive,watch,computed} from 'vue';
    import {addComment} from '@/api/comment'
    import { useStore } from "vuex";
    export default {
        name: "留言管理",
        setup(){
            const store = useStore();
            const current =ref(0);
            const total =ref(0);
            const PageSize=ref(0);
            const comments=reactive({comment:[]})
            // const  aid =ref('liuyanid456123')
            getMessages(1);
           function getMessages(current){
               getMessage(current).then(res=>{
                   comments.comment = res.data.data.records;
                   total.value = res.data.data.total;
                   PageSize.value =res.data.data.size;
                   console.log(res);
               });
           }
            //添加留言
            const commentForm =reactive({
                aid:'',author:'',mail:'',text:'',url:'',type:'1',ownerId:''
            });
            function submit() {
                console.log(commentForm);
                // commentForm.aid=aid;
                commentForm.ownerId='懒回顾';
                addComment(commentForm).then( res=>{
                    const data=res.data.success;
                    if (data){
                        ElMessage.success({
                            message: '添加留言成功',
                            type: 'success'
                        });

                    }else{
                        ElMessage.error('添加留言失败');
                    }
                })
            }
            return{total,PageSize,comments,commentForm,submit,getMessages}
        }
    }
</script>

<style  lang="scss" scoped>
    @import "src/styles/main";
    .comment-meta span:first-child {
        background-color: #dfdddd;
        display: inline-block;
        padding: 3px 8px;
        border-radius: 5px;
    }
    .blog-page{
        margin: 0 auto;
        text-align: center;
    }
    /deep/ .el-divider{

        .el-divider__text{ font-size: 25px; background-color: #f2f2f2;}

    }
    #comment-form{
        /deep/ textarea{
            background-color: transparent;
            min-height: 200px;
            max-height: 500px;
        }
    }
    .comment-info{
        display: inline-flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        .comment-input{
            position: relative;
            width: 28%;

            /deep/.el-input__inner{
                background-color: transparent;
            }
        }
    }
    #comment-avatar{
        width: 50px;
        height: 50px;
        transition: all 1.5s;
        border-radius: 5px;
        box-shadow: 0 0 8px 1px #ccc;
        margin-top: 20px;
    }
    .submit{
        text-align: center;
        text-decoration: none;
        font: 14px/100%;

    }
    .blog-list{
        margin-left: 16.66667%;
        width: 66.66667%;
    }
    .box-card{
        width: 800px;
        margin: 50px auto;
        padding: 15px;
        background: #fff;
        border-radius: 10px;
        background-color: #f2f2f2;

    }
    .blog-title{
        text-align: center;
        font-size: 1.5rem;
        margin: 20px auto;
    }
    .blog-meta{
        text-align: center
    }
    .comments{
        width: 800px;
        margin: 50px auto;
        padding: 15px;

    }
</style>